<script setup lang="ts">
import { GetParkingRuleListAPI } from '@/apis/car'
import type { parkingRuleListParams, RuleListData } from '@/types/car'
import { ref } from 'vue'
import { utils,  writeFileXLSX } from 'xlsx'


// 收费规则
const chargeTypeMap = new Map<RuleListData['chargeType'],string>([
  ['duration','时长收费'],
  ['turn','按次收费'],
  ['partition','分段收费'],

])

// 收费上限处理
const getChargeCeiling = (ChargeCeiling:number) =>{
  if(!ChargeCeiling){
    return ('--')
  }else{
    return ChargeCeiling
  }
}

const dataList = ref<RuleListData[]>([])

const total = ref('40')
const params = ref<parkingRuleListParams>({
  page:1,
  pageSize:10
})
// 查看计费规则列表
const getDataList = async () =>{
  const res = await GetParkingRuleListAPI(params.value)
  console.log('查看计费规则列表：',res)
  dataList.value = res.data.rows
  total.value = String(res.data.total)
}
getDataList()


// 导出数据基础测试
// const exportToExcel = () =>{
//   // 1.创建工作薄 (xlsx文件)、
//   const workbook = utils.book_new()
//   // 2.创建工作表
//   const worksheet = utils.json_to_sheet(
//     [
//       {name:'张三',age:18,sex:'女'},
//     ]
//   )
//   // 3.在xlsx 文件中添加 工作表,Data 为工作表名称
//   utils.book_append_sheet(workbook,worksheet,'Data')
//   // 4.覆盖默认表头，（工作表，二维数组，表头坐标）
//   utils.sheet_add_aoa(worksheet,[['姓名','年龄']],{origin:'A1'})
//   // 5.导入下载xlsx文件
//   writeFileXLSX(workbook,'计费规则表.xlsx')
// }

// 导出Excel 
const exportToExcel = () =>{
  // 1.创建工作薄（xlsx文件）
  const workbook = utils.book_new()
  // 2.创建工作表（表格）
  const worksheet = utils.json_to_sheet(dataList.value.map((item,index)=>({
    ...item,
    id:index + 1,  // 把id 覆盖成序号
    chargeType : chargeTypeMap.get(item.chargeType)
  })))
  // 3.往工作薄中添加表格，（工作薄，表格，表格名）
  utils.book_append_sheet(workbook,worksheet,'计费规则')
  // 4.覆盖默认标题（表格，二维数组，标题位置）
  utils.sheet_add_aoa(
    worksheet,
    [
      [
        '序号','计费规则编号','计费规则名称','免费时长（分钟）','收费上限（元）','计费方式','计费规则'
      ],

    ],
      {origin:'A1'}
  )
  // 4.导出下载的xlsx文件
  writeFileXLSX(workbook,'停车计费规则.xlsx')
}
</script>

<template>
  <div class="car-rule-page">
    <el-button type="primary" style="margin-bottom: 20px;" @click="exportToExcel">增加停车计费规则</el-button>
      <div>
        <el-table :data="dataList" :header-cell-style="{background:'#f4f6f8'}">
          <el-table-column type="index" label="序号" width="80px" ></el-table-column>
          <el-table-column type="text" prop="ruleNumber" label="计费规则编号" width="150px"></el-table-column>
          <el-table-column type="text" prop="ruleName" label="计费规则名称" width="180px"></el-table-column>
          <el-table-column type="text" prop="freeDuration" label="免费时长（分钟）" width="100px"></el-table-column>
          <el-table-column type="text" prop="chargeCeiling" label="收费上限（元）" width="100px">
            <template #default="scope">
              {{ getChargeCeiling(scope.row.chargeCeiling) }}
            </template>
          </el-table-column>
          <el-table-column type="text" prop="durationType" label="计费方式" width="150px">
            <template #default="scope">
              {{ chargeTypeMap.get(scope.row.chargeType) }}
            </template>
          </el-table-column>
          <el-table-column type="text" prop="ruleNameView" label="计费规则" width="360px"></el-table-column>
          <el-table-column type="text" label="操作" >
            <template #default>
              <el-button size="small"  type="text">编辑 </el-button>
              <el-button size="small"  type="text">删除 </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="width: 100%;display: flex;justify-content: space-between;">
          <div></div>
      <!-- 分页器 -->
         <el-pagination
         style="margin-top: 10px;"
           :total="Number(total)"
           :page-sizes="[2,5, 10, 20, 40]"
           layout="total,  prev, pager, next,sizes"
           v-model:current-page="params.page"
           v-model:page-size="params.pageSize"
           @change="getDataList()"
         ></el-pagination>  
        </div>
       
      </div>
  </div>
</template>

<style lang="scss" scoped>
.car-rule-page{
  padding: 20px;
}
</style>
